<template>
  <el-card class="box-card" body-style="padding:10px;" :ref="id" :id="id">
    <el-row 
            class="item">
      <el-col :span="8">姓名：</el-col>
      <el-col :span="16"
              class="value">
        {{name}}
        <!-- <slot name="name"></slot> -->
      </el-col>
    </el-row>
    <el-row 
            class="item">
      <el-col :span="8">ID：</el-col>
      <el-col :span="16"
              class="value">
        <!-- <slot name="id"></slot> -->
        {{id}}
      </el-col>
    </el-row>
    <el-row 
            class="item">
      <el-col :span="8">类别：</el-col>
      <el-col :span="16"
              class="value">
        <!-- <slot name="area"></slot> -->
        {{userPost}}
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'TagInfo',
  props: {
    name: {
      type: String,
      required: true
    },
    id: {
      type: String,
      required: true
    },
    userPost: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang='scss' scoped>
.text {
  font-size: 14px;
}

.item {
  padding-left:3px;
}
.value {
  font-weight: bold;
}

.box-card {
  margin:0;
  width: 180px;
  background-color: rgba(40, 230, 230, 0.5);
}
</style>